.ui-nav-panel__scope {
	/*colors*/
	--color_background: rgba(82, 92, 105, .08);
	--color_text: rgba(82, 92, 105, .8);
	--color_text-hover: #fff;
	--color_border-bottom: rgba(82, 92, 105, .4);
}

.bitrix24-light-theme .ui-nav-panel__scope {
	--color_background: rgba(255,255,255,.15);
	--color_text: rgba(255,255,255,.8);
	--color_border-bottom: rgba(255,255,255,.5);
}

.bitrix24-default-theme .ui-nav-panel__scope,
.bitrix24-dark-theme .ui-nav-panel__scope {
	--color_text-hover: rgba(82, 92, 105, 1);
}

.ui-nav-panel {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	overflow: hidden;
	margin-right: 10px;
	border-radius: 16px;
	background-color: var(--color_background);
	font: 14px/normal var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

.ui-nav-panel__item {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: relative;
	margin: 0 13px;
	min-height: 33px;
	color: var(--color_text);
	white-space: nowrap;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	cursor: pointer;
}

.ui-nav-panel__item:hover {
	color: var(--color_text-hover);
	-webkit-transition: .1s;
	-o-transition: .1s;
	transition: .1s;
}

.ui-nav-panel__item.--active {
	color: var(--color_text-hover);
	pointer-events: none;
	cursor: default;
}

.ui-nav-panel__item.--active:after {
	content: '';
	position: absolute;
	bottom: 1px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--color_border-bottom);
}

.ui-nav-panel__item.--locked {
	cursor: default;
	opacity: .5;
}

.ui-nav-panel__item.--locked:before {
	display: inline-block;
	width: 12px;
	height: 16px;
	content: '';
	background: no-repeat center url();
	margin-right: 11px;
}
